<template>
	<view class="sub-page">
		<uni-easyinput prefixIcon="search" placeholder="请输入关键词信息…" v-model="params.searchValue" @change="change"
			class="search" clearable></uni-easyinput>
		<view class="data-container">
			<scroll-view scroll-y @scrolltolower="getDataList"  :scroll-top="scrollValue"
				:enable-flex="true">
				<view class="scroll">
					<view v-for="(item,index) in dataList" class="card" :key="index" @click="openDocument(item.fileId)">
						<view class="title">
							<view>
								<text class="name">{{item.fileTitle}}</text>
								<uni-icons custom-prefix="iconfont" v-bind:type="iconType(item.fileType)" size="20"
									v-bind:color="iconColor(item.fileType)"></uni-icons>
							</view>
					
							<text class="time">{{item.createTime}}</text>
						</view>
						<text class="content">{{item.remark}}</text>
					</view>
					<u-loadmore :status="status" />
				</view>
				
			
			</scroll-view>
			
			
		</view>
		
	</view>
</template>

<script>
	import * as API from '@/common/api';
	export default {
		name: "scan-printer-knowledgeBase",
		data() {
			return {
				scrollValue: 0,
				oldScrollValue: 0,
				status: 'loadmore',
				dataList: [],
				params: {
					brandId: '',
					modelId: '',
					category: '',
					searchValue: undefined,
					pageNum: 1,
					pageSize: 10,
				},
			};
		},
		mounted() {
			this.getInitDataList();
		},
		methods: {
			iconType(e) {
				if (e == '.pdf') {
					return 'icon-file-pdf'
				} else if (e == '.doc' || e=='.docx') {
					return 'icon-file-word'
				} else if (e == '.mp4') {
					return 'icon-file-mp4'
				}
			},
			iconColor(e) {
				if (e == '.pdf') {
					return '#F19CAA'
				} else if (e == '.doc' || e=='.docx') {
					return '#93C145'
				} else if (e == '.mp4') {
					return '#4091D7'
				}
			},
			async change(e) {
				await this.getInitDataList();
			},
			scrollTop() {
				this.scrollValue = this.oldScrollValue
				this.$nextTick(() => {
					this.scrollValue = 0
				});
			},
			getInitDataList() {
				this.params.pageNum = 1;
				this.status = 'loadmore';
				this.dataList = [];
				this.scrollTop();
				this.getDataList();
			},
			async getDataList() {
				if (this.status != 'nomore') {
					this.status = 'loading';
					const res = await API.listKmDoc({
						params: this.params
					});
					this.dataList = this.dataList.concat(res.rows);
					this.params.pageNum += 1;
					if (res.total <= this.params.pageNum * this.params.pageSize) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
			
					}
				}
			},
			async openDocument(fileId) {
				if(!fileId||fileId==0) return;
				const previewRes = await API.previewFile(fileId);
				const url = previewRes.data;
				uni.downloadFile({
					url: url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.sub-page
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		z-index: 2;
		.search {
			margin: 10rpx 0;
		}
		
		.data-container {
			height: auto;
			width: 100%;
			.scroll {
				height: 520rpx;
				gap: 15rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				width: 100%;
				.card {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					height: 320rpx;
					width: 100%;
					box-sizing: border-box;
					border-radius: 10rpx;
					background: #FFFFFF;
					border-top: 1px solid rgba(255, 255, 255, 1);
					border-left: 1px solid rgba(255, 255, 255, 1);
					box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
		
					.title {
						width: 100%;
						margin: 5rpx 10rpx 0rpx;
						padding-bottom: 4rpx;
						border-bottom: 1rpx solid #ddd;
						display: flex;
						box-sizing: border-box;
						padding: 0 20rpx;
						height: 60rpx;
						gap: 10rpx;
						align-items: center;
						justify-content: space-between;
		
						.name {
							color: #989898;
							font-size: 30rpx;
							font-weight: 400;
							margin-right: 10rpx;
						}
		
						.time {
							
							font-size: 24rpx;
						}
					}
		
		
					.content {
						width: 100%;
						box-sizing: border-box;
						padding: 20rpx;
						font-size: 28rpx;
						color: #777;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						line-clamp: 3;
						-webkit-box-orient: vertical;
						min-height: 150rpx;
					}
				}
		
			}
		
		}
	}
	
</style>